<template>
  <el-card>
    <template #header>
      <div class="flex-between">
        <span>{{ title }}</span>
        <el-button type="primary" @click="openDialog()">新增</el-button>
      </div>
    </template>

    <el-form :inline="true" class="mb-3">
      <el-form-item label="关键字">
        <el-input v-model="query.keyword" placeholder="搜索" clearable />
      </el-form-item>
      <el-button type="primary" @click="loadData">查询</el-button>
      <el-button @click="resetQuery">重置</el-button>
    </el-form>

    <el-table
        :data="list"
        border
        stripe
        style="width: 100%;"
    >
      <!-- 号别编码 -->
      <el-table-column
          prop="registcode"
          label="号别编码"
          min-width="120"
      />

      <!-- 号别名称 -->
      <el-table-column
          prop="registname"
          label="号别名称"
          min-width="150"
      />

      <!-- 顺序号 -->
      <el-table-column
          prop="sequenceno"
          label="顺序号"
          min-width="100"
      />

      <!-- 挂号费用 -->
      <el-table-column
          prop="registfee"
          label="挂号费"
          min-width="100"
          :formatter="(row, column, cellValue) => {
    // cellValue 才是 registFee
    return cellValue != null
      ? Number(cellValue).toFixed(2)
      : ''
  }"
      />

      <!-- 挂号限额 -->
      <el-table-column
          prop="registquota"
          label="挂号限额"
          min-width="100"
      />

      <!-- 操作 -->
      <el-table-column
          label="操作"
          fixed="right"
          min-width="160"
      >
        <template #default="{ row }">
          <el-button
              size="small"
              type="primary"
              @click="openDialog(row)"
          >编辑</el-button>
          <el-button
              size="small"
              type="danger"
              @click="handleDelete(row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        class="mt-3"
        background
        layout="total, prev, pager, next, sizes"
        :total="total"
        v-model:current-page="query.page"
        v-model:page-size="query.pageSize"
        @size-change="loadData"
        @current-change="loadData"
    />

    <el-dialog :title="dialogTitle" v-model="dialogVisible" width="500px">
      <el-form
          :model="form"
          :rules="rules"
          ref="formRef"
          label-width="100px"
      >
        <!-- 号别编码 -->
        <el-form-item label="号别编码" prop="registcode">
          <el-input v-model="form.registcode" />
        </el-form-item>

        <!-- 号别名称 -->
        <el-form-item label="号别名称" prop="registname">
          <el-input v-model="form.registname" />
        </el-form-item>

        <!-- 顺序号 -->
        <el-form-item label="顺序号" prop="sequenceno">
          <el-input-number
              v-model="form.sequenceno"
              :min="0"
              style="width: 100%;"
          />
        </el-form-item>

        <!-- 挂号费 -->
        <el-form-item label="挂号费" prop="registfee">
          <el-input-number
              v-model="form.registfee"
              :min="0"
              :step="0.01"
              style="width: 100%;"
          />
        </el-form-item>

        <!-- 挂号限额 -->
        <el-form-item label="挂号限额" prop="registquota">
          <el-input-number
              v-model="form.registquota"
              :min="0"
              style="width: 100%;"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">保存</el-button>
      </template>
    </el-dialog>

  </el-card>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue';
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';

const entity = 'reglevel';
const title = '挂号级别管理';

interface Item {
  id?: number;
  registcode:  string;
  registname:  string;
  sequenceno:  number;
  registfee:   number;
  registquota: number;
}


const list = ref<Item[]>([]);
const total = ref(0);
const query = reactive({ keyword: '', page: 1, pageSize: 10 });

async function loadData() {
  // 1. 发请求拿到原始数组
  const res = await axios.get<Registlevel[]>(`/api/master/reglevel`, { params: query });
  // 2. 直接赋值
  list.value  = res.data;
  total.value = res.data.length;
}
function resetQuery() { query.keyword=''; query.page=1; loadData(); }
onMounted(loadData);

const dialogVisible = ref(false); const dialogTitle = ref(''); const formRef = ref();
const form = reactive<Item>({
  registcode:  '',
  registname:  '',
  sequenceno:  0,
  registfee:   0,
  registquota: 0,
});
const rules = {
  registcode: [
    { required: true, message: '请输入号别编码', trigger: 'blur' }
  ],
  registname: [
    { required: true, message: '请输入号别名称', trigger: 'blur' }
  ],
  sequenceno: [
    { required: true, message: '请输入顺序号', trigger: 'blur' }
  ],
  registfee: [
    { required: true, message: '请输入挂号费', trigger: 'blur' }
  ],
  registquota: [
    { required: true, message: '请输入挂号限额', trigger: 'blur' }
  ],
};
function openDialog(row?: Item) {
  if (row) { Object.assign(form, row); dialogTitle.value='编辑'; }
  else { Object.assign(form, { id:undefined, code:'', name:'' }); dialogTitle.value='新增'; }
  dialogVisible.value = true;
}
async function submitForm() {
  await formRef.value.validate();
  if (form.id) { await axios.put(`/api/master/${entity}/${form.id}`, form); ElMessage.success('更新成功'); }
  else { await axios.post(`/api/master/${entity}`, form); ElMessage.success('新增成功'); }
  dialogVisible.value=false; loadData();
}
async function handleDelete(row: Item) {
  await ElMessageBox.confirm('确认删除吗？','提示',{type:'warning'});
  await axios.delete(`/api/master/${entity}/${row.id}`);
  ElMessage.success('删除成功'); loadData();
}
</script>

<style scoped>
.flex-between{display:flex;justify-content:space-between;align-items:center;}
</style>
